<template>
  <view class="traffic-detail-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="流量详单" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <view class="user-info-section">
        <view class="user-phone">
          <text class="phone-number">{{ phoneNumber }}</text>
          <view class="date-picker" @click="showDatePicker">
            <image class="calendar-icon" src="/static/icons/icon-data.png" mode="aspectFit" />
            <text class="date-text">{{ currentDate }}</text>
          </view>
        </view>
        
        <!-- <view class="month-tabs">
          <view 
            class="tab-item" 
            v-for="(month, index) in monthTabs" 
            :key="index"
            :class="{ active: currentMonth === index }"
            @click="switchMonth(month, index)"
          >
            {{ month }}
          </view>
        </view> -->
      </view>
      
      <!-- 摘要卡片 -->
      <view class="summary-cards">
        <image class="bg-image" src="/static/images/bg3.png" mode="aspectFill" />
        <view class="summary-cards-wrapper">
          <view class="summary-card">
            <text class="card-title">流量合计(GB)</text>
            <text class="card-value">{{ totalTraffic }}</text>
          </view>
          <view class="summary-card">
            <text class="card-title">费用合计(元)</text>
            <text class="card-value">{{ totalCost }}</text>
          </view>
        </view>
      </view>
      
      <!-- 详单明细 -->
      <view class="detail-section">
        <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">详单明细</text>
        </view>
        <view class="detail-list" v-if="detailList.length > 0">
          <view 
            class="detail-item" 
            v-for="(item, index) in detailList" 
            :key="index"
          >
            <text class="item-date">{{ item.date }}</text>
            <view class="item-content">
              <view class="item-header">
                <text class="item-type">{{ item.type }}</text>
                <text class="item-cost">{{ item.cost }}</text>
              </view>
              <view class="item-info">
                <view class="item-details">
                  <text class="item-label">流量</text>
                  <text class="item-value">{{ item.traffic }}</text>
                </view>
                <view class="item-details">
                  <text class="item-label">起始时间</text>
                  <text class="item-value">{{ item.startTime }}</text>
                </view>
                <view class="item-details">
                  <text class="item-label">上网时长</text>
                  <text class="item-value">{{ item.duration }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-state" v-else>
          <view class="empty-box">
            <image src="/static/icons/icon-none.png" alt=""/>
            <text class="empty-text">暂无内容哦~</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')
const currentDate = ref((new Date().getMonth() + 1) + '月'+(new Date().getDate())+'日')
const currentMonth = ref(0)
const monthTabs = ref(['10月', '9月', '8月', '7月', '6月', '5月', '4月'])
const totalTraffic = ref(0)
const totalCost = ref(0.00)

const detailList = ref([
  {
    date: '2025-10-01',
    type: '普通上网',
    cost: '0.00元',
    traffic: '586KB',
    startTime: '00:05:48',
    duration: '16秒'
  },
  {
    date: '2025-10-01',
    type: '普通上网',
    cost: '0.00元',
    traffic: '586KB',
    startTime: '00:05:48',
    duration: '16秒'
  },
  {
    date: '2025-10-01',
    type: '普通上网',
    cost: '0.00元',
    traffic: '586KB',
    startTime: '00:05:48',
    duration: '16秒'
  }
])

onLoad((options) => {
  console.log('onLoad options:', options)
  if (options && options.phoneNumber) {
    phoneNumber.value = options.phoneNumber
  }
 
  if (options && options.queryPeriod) {
    var queryPeriod = decodeURIComponent(options.queryPeriod)
    if (queryPeriod === '按月查询') {
      var selectedMonth = decodeURIComponent(options.selectedMonth)
      if(selectedMonth=='本月'){
        var currDate = new Date()
        selectedMonth = currDate.getFullYear() +'' + ((currDate.getMonth() + 1)>10?currDate.getMonth() + 1:'0' + (currDate.getMonth() + 1))
        getDetailList('113', selectedMonth,'', '')
      }else{
        getDetailList('113', selectedMonth.replace('年', '').replace('月', '').replace(/\s+/g, ''), '', '')
      }
      
    }else if (queryPeriod === '按日查询') {
      getDetailList('113', '', decodeURIComponent(options.startDate), decodeURIComponent(options.endDate) )
    }
  }
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})


// 查询详单
const getDetailList = (queryType, queryMonth, queryBeginTime, queryEndTime) => {
  api.getDetailList({
    queryType: '113',
    queryMonth:queryMonth?queryMonth:'',
    queryBeginTime:queryBeginTime?queryBeginTime.replace('-', '').replace('-', '').replace(/\s+/g, ''):'',
    queryEndTime:queryEndTime?queryEndTime.replace('-', '').replace('-', '').replace(/\s+/g, ''):'' 
  }).then(res => {
    console.log('查询详单响应:', JSON.stringify(res))
    if (res.code === 200) {
      // 处理查询成功逻辑
      const queryData = res.data || []
      console.log('queryData = ',queryData.length)
      
      detailList.value = []
      queryData.forEach((item,index) => {
        if(index > 0){
           var data = item.listDetail.split('|')
          totalCost.value += Number(data[6]);
          totalTraffic.value = Number(getFlowSize(data[2]));
        }

        
        
        if(index >0 && index < 10) {
          console.log('index = ',index)
          var data = item.listDetail.split('|')
          detailList.value.push({ date: data[0].substring(0,10).replace(/\//g,'-'),type:'普通上网', cost:  Number(data[6]).toFixed(2) + '元',traffic:data[2] ,startTime:data[0].substring(11),duration:data[1]})
        }
      })

      totalCost.value = Number(totalCost.value).toFixed(2)
    } else {
      uni.showToast({
        title: res.msg || '查询失败',
        icon: 'none',
        duration: 2000
      })
    }
  }).catch(err => {
    console.error('查询失败:', err)
 
  })
}

const getFlowSize = (data) => {
			var flowSize = 0;
			if(data.indexOf(" ") > 0){
				flowSize = Number(data.split(" ")[0].replace("MB","")) + Number(Number(data.split(" ")[1].replace("KB","")/1024).toFixed(2));
			}else{
				if(data.indexOf("KB") > 0){
					flowSize = (Number(data.replace("KB",""))/1024).toFixed(2);
				}else if(data.indexOf("MB") > 0) {
					flowSize = (Number(data.replace("MB",""))).toFixed(2);
				}
				
			}
			return flowSize;
		}

const showDatePicker = () => {
  // uni.showToast({
  //   title: '日期选择功能',
  //   icon: 'none'
  // })
}

// const switchMonth = (month, index) => {
//   currentMonth.value = index
//   console.log('切换月份:', month)
//   // TODO: 获取对应月份的数据
// }
</script>

<style scoped>
.traffic-detail-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx;
  padding-bottom: 40rpx;
}

.user-info-section {
  margin-top: 40rpx;
}

.user-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.phone-number {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  border-radius: 40px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180.00deg, rgba(255, 255, 255, 0.9),rgba(222.26136779785156, 233.55055236816406, 255, 0.9) 20%,rgba(197, 217, 255, 0.9) 53%,rgba(227.102294921875, 236.72218322753906, 255, 0.9) 90%,rgba(255, 255, 255, 0.9) 100%);
  gap: 8rpx;
  padding: 8rpx 16rpx;
}

.calendar-icon {
  width: 32rpx;
  height: 32rpx;
}

.date-text {
  color: rgba(78, 138, 254, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 32rpx;
}

.month-tabs {
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  margin-bottom: 30rpx;
  overflow-x: auto;
}

.tab-item {
  padding: 8rpx 16rpx;
  color: rgba(255, 255, 255, 0.8);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 38rpx;
  border-radius: 8rpx;
  white-space: nowrap;
}

.tab-item.active {
  border-radius: 20px;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
}

.summary-cards {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  margin-bottom: 32rpx;
}

.bg-image {
  width: 670rpx;
  height: 158rpx;
}

.summary-cards-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-card {
  border-radius: 16rpx;
  padding: 32rpx 100rpx;
  flex-direction: column;
  display: flex;
  align-items: center;
}

.card-title {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
}

.card-value {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 48rpx;
  font-weight: 700;
  line-height: 56rpx;
}

.detail-section {
  margin-bottom: 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-item {
  /* background: rgba(255, 255, 255, 1);
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
  border-radius: 16rpx;
  padding: 24rpx; */
}

.item-content {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 16rpx;
  margin-top: 16rpx;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;  
  background: rgba(255, 255, 255, 1);
}

.item-date {
  color: rgba(153, 153, 153, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
font-weight: 500;
line-height: 32rpx;

}
.item-type {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
}
.item-cost {
  color: rgba(78, 138, 254, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 32rpx;
}

.item-info {
  background: rgba(247, 247, 247, 1);
  border-radius: 0px 0px 16rpx 16rpx;
box-shadow: 0px 4px 4px 0px rgba(125, 182, 251, 0.1),inset 0px 3px 5px 0px rgba(0, 0, 0, 0.05);
  padding: 24rpx;
  margin: 16rpx -24rpx -24rpx -24rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.item-details {
   display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-label {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
  min-width: 120rpx;
}

.item-value {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
  padding: 60rpx 40rpx;
  border-radius: 16rpx;
  min-width: 400rpx;
}
.empty-box image{
  width: 280rpx;
  height: 280rpx;
}
.empty-text {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
}
</style>

